<template>
    <el-config-provider :locale="currentLocale">
        <!-- <el-date-picker :model-value="data" :editable="false" unlink-panels :type="configure.type"
			:placeholder="configure.placeholder" :start-placeholder="configure.startPlaceholder"
			:end-placeholder="configure.endPlaceholder" :range-separator="configure.rangeSeparator" @change="$onChange"
			@update:model-value="$onUpdate" :disabled="configure.disabled" :disabled-date="_disabledDate" value-format="x"
			:clearable="props.configure.clearable == undefined ? true : props.configure.clearable" /> -->
        <el-time-picker format="HH:mm" v-model="data" :placeholder="configure.placeholder"
            :clearable="props.configure.clearable == undefined ? true : props.configure.clearable"
            :disabled="configure.disabled" @update:model-value="$onUpdate" @change="$onChange"></el-time-picker>

    </el-config-provider>
</template>

<script lang="ts" setup>
import { typeUtils } from "../../../../../utils";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { computed, PropType } from "vue";

import {
    TimePickerDataType, TimePickerConf
} from "./type";
import { defaultTimePickerDataConf, defaultTimePickerConf } from "./data";

const CONF = "configure";
const DATA_NAME = "modelValue";
const UPDATE_DATE = "update:modelValue";
const currentLocale = computed(() => zhCn)

const props = defineProps({
    /**配置项 */
    [CONF]: {
        type: Object as PropType<TimePickerConf>,
        default: {},
    },
    /**数据源 */
    [DATA_NAME]: {
        type: [Number, Array] as PropType<TimePickerDataType>,
        default: undefined,
    },
});

// const _getDifFromType = (type: TimePickerConf["type"]) => {
// 	const dataArr = [props[DATA_NAME]].flat() as number[];
// 	if (type == "date" || type == "datetime" || !type) {
// 		return {
// 			defaultConf: defaultDatePickerDateConf,
// 			data: dataArr[0] as number,
// 		};
// 	} else {
// 		return {
// 			defaultConf: defaultDatePickerRangeConf,
// 			data: (dataArr.length == 1 ? dataArr.push(dataArr[0]) && dataArr : dataArr) as [
// 				number,
// 				number
// 			],
// 		};
// 	}
// };

const configure = computed(
    (): TimePickerConf => {
        // const { defaultConf } = _getDifFromType(props[CONF].type);
        return Object.assign(defaultTimePickerDataConf, props[CONF]);
    }
);

const isNumber = (val: unknown) => {
    if (typeof val !== "number") {
        if (Number.isNaN(Number(val))) {
            throw new Error("时间选择器收到不合规的参数 -> " + val);
        }
        return Number(val);
    } else {
        return val;
    }
};

const data = computed(() => {
    // let { data } = _getDifFromType(props[CONF].type);
    let data = props[DATA_NAME]
    if (Array.isArray(data)) {
        data.forEach((d, i) => {
            // @ts-ignore
            data[i] = isNumber(d);
        });
    } else {
        data = isNumber(data);
    }
    return data;
});
// const _disabledDate = (date: Date) => {
//     if (
//         date.valueOf() < configure.value.minDate.valueOf() ||
//         date.valueOf() > configure.value.maxDate.valueOf()
//     ) {
//         return true;
//     }
//     return false;
// };
const emits = defineEmits<{
    (e: "update:modelValue", val: TimePickerDataType): void;
    (e: "onChange", val: TimePickerDataType): void;
}>();
const $onUpdate = (val: TimePickerDataType) => {
    emits(UPDATE_DATE, val);
};
const $onChange = (val: TimePickerDataType) => {
    emits("onChange", val);
};

const setData = (val: TimePickerDataType) => {
    $onUpdate(val);
};
const getData = () => {
    return data.value;
};
defineExpose({ setData, getData });
</script>

<style lang="scss" scoped></style>
